<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css"  media="all">
    <script type="text/javascript" src="js/jquery.js"></script>

    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<!--<div class="layui-header"></div>-->
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <ul class="layui-nav" style="background-color: #202020">
            <li class="layui-nav-item" style="width: 5%"></li>
            <li class="layui-nav-item" style="width: 13%" value="logo"><a href=""><img src="image/yoyoga.png" style="height: 50px"></a></li>
            <li class="layui-nav-item" style="width: 12%"></li>
            <li class="layui-nav-item" style="text-align: center;width: 8%"><a href="">主页</a></li>
            <li class="layui-nav-item" style="text-align: center;width: 8%">
                <a href="#">介绍</a>
                <dl class="layui-nav-child">
                    <dd><a href="">瑜伽好处</a></dd>
                    <dd><a href="">瑜伽流派</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" style="text-align: center;width: 8%"><a href="">场馆</a></li>
            <li class="layui-nav-item" style="text-align: center;width: 8%">
                <a href="#">教练</a>
                <dl class="layui-nav-child">
                    <dd><a href="">移动模块</a></dd>
                    <dd><a href="">后台模版</a></dd>
                    <dd class="layui-this"><a href="">选中项</a></dd>
                    <dd><a href="">电商平台</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" style="text-align: center;width: 8%"><a href="">社区</a></li>


            <!--<li class="layui-nav-item"  style="float: right">
                <a href="">注册</a>
            </li>
            <li class="layui-nav-item"  style="float: right"><span style="color: #cccccc">|</span></li>
            <li class="layui-nav-item" style="float: right">
                <a href="">登陆</a>
            </li>-->
        </ul>


        <div class="layui-body">
            <div style="margin-left: 500px;margin-top: 10px;font-size: 20px">教练信息完善</div>
            <!-- 内容主体区域 -->
            <form class="layui-form" style="width: 80%;margin-left: 50px;">
                <div style="margin-bottom: 20px;"></div>

                <div class="layui-form-item">
                    <label class="layui-form-label">可见状态</label>
                    <div class="layui-input-block">
                        <select id="permission" name="interest" lay-filter="aihao">
                            <option value="1" selected="">所有人可见</option>
                            <option value="0">仅自己可见</option>
                            <option value="2">好友可见</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item" style="margin-top: 20px;">
                    <label class="layui-form-label">用户账号</label>
                    <div class="layui-input-block">
                        <input type="text" id="userAccount" name="account" required  lay-verify="required"  value="" autocomplete="off" readonly="readonly" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="margin-top: 20px;">
                    <label class="layui-form-label">用户姓名</label>
                    <div class="layui-input-block">
                        <input type="text" id="userName" name="userName11" required  lay-verify="required" value="" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">课时费</label>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" id="t_value" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                    <div class="layui-form-item">
                    <label class="layui-form-label">上课时间</label>
                    <div class="layui-input-block">
                        <div>星期一：</div>
                        <input type="checkbox" name="mon1" title="09:00-11:00" checked="">
                        <input type="checkbox" name="mon2" title="13:00-15:00" checked="">
                        <input type="checkbox" name="mon3" title="16:00-18:00" checked="">
                    </div>
                    <div class="layui-input-block">
                        <div>星期二：</div>
                        <input type="checkbox" name="tue1" title="09:00-11:00" checked="">
                        <input type="checkbox" name="tue2" title="13:00-15:00" checked="">
                        <input type="checkbox" name="tue3" title="16:00-18:00" checked="">
                    </div>
                    <div class="layui-input-block">
                        <div>星期三：</div>
                        <input type="checkbox" name="wed1" title="09:00-11:00" checked="">
                        <input type="checkbox" name="wed2" title="13:00-15:00" checked="">
                        <input type="checkbox" name="wed3" title="16:00-18:00" checked="">
                    </div>
                    <div class="layui-input-block">
                        <div>星期四：</div>
                        <input type="checkbox" name="thurs1" title="09:00-11:00" checked="">
                        <input type="checkbox" name="thurs2" title="13:00-15:00" checked="">
                        <input type="checkbox" name="thurs3" title="16:00-18:00" checked="">
                    </div>
                    <div class="layui-input-block">
                        <div>星期五：</div>
                        <input type="checkbox" name="fri1" title="09:00-11:00" checked="">
                        <input type="checkbox" name="fri2" title="13:00-15:00" checked="">
                        <input type="checkbox" name="fri3" title="16:00-18:00" checked="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否接课</label>
                    <div class="layui-input-block">
                        <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="是|否">
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">个人简介</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" id="introduction" class="layui-textarea"></textarea>
                    </div>
                </div>

                <div class="layui-form-item" style="margin-left: 100px;">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;">
                        <legend>请选择地址信息</legend>
                    </fieldset>
                </div>
                <iframe id="mapPage" width="80%" height="800px" frameborder=0 style="margin-left: 100px;"
                        src="http://apis.map.qq.com/tools/locpicker?search=1&type=1&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp">
                </iframe>

                <div style="margin-left: 100px;">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>请上传头像</legend>
                    </fieldset>

                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="test1">上传图片</button>
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" width="60" height="60" id="demo1">
                            <p id="demoText"></p>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" lay-submit="" lay-filter="demo1" id="btn1">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>

            </form>
        </div>


    </div>
</div>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/javascript" src="layui/layui.js"></script>
<script>
    var path;
    var address;
    var latlng;
    layui.use([ 'jquery', 'layer', 'form', 'table','laydate','upload','element'], function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var laydate=layui.laydate;
        var upload=layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: 'file/upload'
            ,accept:'images'
            ,acceptMime:'image/*'
            ,auto:true//是否选择文件之后自动上传
            ,field:'mf' //表单的name值
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                layer.msg("上传成功");
                path = res.src;
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)
            //  layer.msg(elem.text());
        });

    });

    window.addEventListener('message', function(event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        var loc = event.data;
        if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
            console.log('location', loc);
            detail = loc.poiaddress;
            console.log("detail",detail);
            address=detail;
            //获取经纬度并且赋值
            var lat = loc.latlng.lat;
            var lng = loc.latlng.lng;
            //经纬度拼接
            latlng = lat+","+lng;
            console.log("latlng","latlng是："+latlng);
        }
    }, false);

    //鼠标失焦事件
    $(function(){
        $("#userName").blur(function(){
            if ($("#userName").val().length==0) {
                layer.tips('姓名不能为空', '#userName', {
                    tips: [1, '#FF0000'],
                    time: 1000
                });
            }

        });

        $("#t_value").blur(function(){
            var tValue = $("#t_value").val();
            if(!(/^\d+$/.test(tValue))){
                layer.tips('输入的格式不正确', '#t_value', {
                    tips: [1, '#FF0000'],
                    time: 5000
                });
            }

        });

    });
    //提交信息
    $("#btn1").click(function(){
        var userName = $("#userName").val();
        var introduction = $("#introduction").val();
        var tValue = $("#t_value").val();
        var permission = $("#permission option:selected").val();
        var  freetime =  countTime();
        alert("userName:"+userName+":permission:"+permission+"freetime"+freetime);
        if(userName==""){
            return;
        }
        if (address==null) {
            layer.tips('地址不能为空', '#mapPage', {
                tips: [1, '#FF0000'],
                time: 5000
            });
            return;
        }
        if(!(/^\d+$/.test(tValue))){
            layer.tips('输入的格式不正确', '#t_value', {
                tips: [1, '#FF0000'],
                time: 5000
            });
            return;
        }
        alert(userName+";"+introduction+";"+address+";"+latlng+";"+path);
        $.ajax({
            type:"post",
            url:"/trainerVerify/trainerAddInfo",
            data:{
                tImage:path,
                tName:userName,
                tIntroduction:introduction,
                tAddress:address,
                tLatlng:latlng,
                tPermission:permission,
                tValue:tValue,
                tFreetime:freetime

            },
            success:function(data) {
                layer.alert(data);
            }


        });

    });

    //获取上课时间选择
    function countTime() {
        var mon1,mon2,mon3,tue1,tue2,tue3,wed1,wed2,wed3,thurs1,thurs2,thurs3,fri1,fri2,fri3;
        if ($('input[name="mon1"]').is(":checked")) {
            mon1 = 0;
        }else{
            mon1 = 1;
        }

        if ($('input[name="mon2"]').is(":checked")) {
            mon2 = 0;
        }else{
            mon2 = 1;
        }

        if ($('input[name="mon3"]').is(":checked")) {
            mon3 = 0;
        }else{
            mon3 = 1;
        }

        if ($('input[name="tue1"]').is(":checked")) {
            tue1 = 0;
        }else{
            tue1 = 1;
        }

        if ($('input[name="tue2"]').is(":checked")) {
            tue2 = 0;
        }else{
            tue2 = 1;
        }

        if ($('input[name="tue3"]').is(":checked")) {
            tue3 = 0;
        }else{
            tue3 = 1;
        }

        if ($('input[name="wed1"]').is(":checked")) {
            wed1 = 0;
        }else{
            wed1 = 1;
        }

        if ($('input[name="wed2"]').is(":checked")) {
            wed2 = 0;
        }else{
            wed2 = 1;
        }

        if ($('input[name="wed3"]').is(":checked")) {
            wed3 = 0;
        }else{
            wed3 = 1;
        }

        if ($('input[name="thurs1"]').is(":checked")) {
            thurs1 = 0;
        }else{
            thurs1 = 1;
        }

        if ($('input[name="thurs2"]').is(":checked")) {
            thurs2 = 0;
        }else{
            thurs2 = 1;
        }

        if ($('input[name="thurs3"]').is(":checked")) {
            thurs3 = 0;
        }else{
            thurs3 = 1;
        }

        if ($('input[name="fri1"]').is(":checked")) {
            fri1 = 0;
        }else{
            fri1 = 1;
        }

        if ($('input[name="fri2"]').is(":checked")) {
            fri2 = 0;
        }else{
            fri2 = 1;
        }

        if ($('input[name="fri3"]').is(":checked")) {
            fri3 = 0;
        }else{
            fri3 = 1;
        }
         //拼接
        var freetime = mon1+","+mon2+","+mon3+";"+tue1+","+tue2+","+tue3+";"+wed1+","+wed2+","+wed3+";"+thurs1+","+thurs2+","+thurs3+";"+fri1+","+fri2+","+fri3;
        return freetime;

    }




    $(function(){
        $.ajax({
            type:"get",
            url:"/trainerVerify/getTrainerValue",
            success:function(data) {
                $("#userAccount").val(data.tTrainer.tAccount);
            }
        });
    });

</script>

</body>
</html>